<template>
  <div class="header w-full" :class="[store.isFlag ? 'flex' : '']">
    <div class="header-left border-2 p-1 yu-color-text mr-4 mb-4" :class="store.isFlag ? 'w-60 h-60 ' : 'w-40 h-40'">
      <img class="w-full h-full" :src="playlist?.coverImgUrl" alt="">
    </div>
    <div class="header-right  flex-1">
      <ul>
        <li class="text-2xl font-bold yu-titleColor">{{ playlist?.name }}</li>
        <li>
          <header-song :song-info="playlist.ar_al" v-if="store.currentInfo.type === 0"/>
          <header-song-list :song-list="playlist?.creator" :create-time="playlist?.createTime"
                            v-if="store.currentInfo.type === 1"/>
          <header-album :album="playlist.creator" v-if="store.currentInfo.type === 2"/>
          <header-radio :radio-info="playlist?.artists" v-if="store.currentInfo.type === 5"/>
          <header-radio-program :radio-program-info="playlist"  v-if="store.currentInfo.type === 6"/>
        </li>
        <li class="w-full flex-wrap mb-2" :class="[flexCenter]">
          <!-- 操作按钮 -->
          <header-actions
              :actions-data="playlist"
              :songs="songs"
              :isCollect="flag"
              :isLike="store.currentInfo.type === 6"
              :isShare="!(store.currentInfo.type === 6)"
              :isDownload="!(store.currentInfo.type === 6)"
              :isAddMusicList="store.currentInfo.type === 1"
              :isReview="!(store.currentInfo.type === 5)"
              :isAddPlaylist="!(store.currentInfo.type === 5 || store.currentInfo.type === 6)"
              :isSubscription="store.currentInfo.type === 5 || store.currentInfo.type === 6"
          />
        </li>
        <li v-if="playlist?.tags && playlist?.tags.length > 0" :class="[m_t_b, flexCenter]">
          <span>标签：</span>
          <span class="p-1 py-1 px-2 border-1 mr-1 rounded-full text-xs" :class="cursorStyle"
                v-for="(tag, index) in playlist?.tags" :key="index">{{ tag }}</span>
        </li>
        <li>
          <van-collapse v-model="introduce">
            <van-collapse-item title="介绍" name="1">
              <div class="flex items-center">
                <span v-if="store.currentInfo.type === 5" class="border-1 mr-1 p-1 text-xs yu-textColor-active">{{ playlist?.category }}</span>
                <div v-html="playlist?.description"></div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {computed, reactive, ref, toRefs} from "vue";
import {useStore} from "@/store/index"
// 操作按钮，比如播放按钮，添加收藏
import HeaderActions from '@/components/HeaderActions/index.vue'

import HeaderSong from './components/HeaderSong/index.vue'
import HeaderSongList from './components/HeaderSongList/index.vue'
import HeaderAlbum from './components/HeaderAlbum/index.vue'
import HeaderRadio from './components/HeaderRadio/index.vue'
import HeaderRadioProgram from './components/HeaderRadioProgram/index.vue'


const store = useStore()

defineProps({
  playlist: Object, // 渲染歌的信息
  songs: Array, // 用于添加到歌单使用id
  radioMusic: Object // 电台的节目
})

const styleHeader = reactive({
  flexCenter: 'flex items-center',
  m_t_b: 'mt-2 mb-2',
  cursorStyle: 'transition cursor-pointer yu-textColor-hover',
  shareParams: {}
})
const {flexCenter, m_t_b, cursorStyle} = toRefs(styleHeader)

// 是否咋展示添加到我的歌单
const flag = computed(() => {
  switch (store.currentInfo.type) {
    case 1:
      return false
    case 5:
      return false
    case 6:
      return false
    default:
      return true
  }
})

// 标签初始化展开
const introduce = ref(['1']);


</script>

<style scoped lang="scss">
.van-button {
  margin: 4px;
}

// 修改介绍样式
.van-collapse {
  :deep(.van-cell) {
    background-color: v-bind('store.theme.HoverBgColor');
    color: v-bind('store.theme.textColor');
    font-weight: bold;

    .van-badge__wrapper {
      color: v-bind('store.theme.textColor');
    }
  }

  :deep(.van-collapse-item__content) {
    background-color: v-bind('store.theme.secondaryBgColor');
    color: v-bind('store.theme.textColor');
  }
}
</style>
